<template>
  <div class="login">
    <div class="login-wel">欢迎！</div>
    <div class="login-text">登录到</div>
    <div class="login-eng">Lorem Ipsum is simply</div>
    <div class="user">用户名</div>

    <el-input
      v-model="usernamelg"
      type="text"
      class="username-lg"
      placeholder="请输入您的用户名"
    />

    <div class="psw-lg">密码</div>
    <el-input
      v-model="passwordlg"
      class="password-lg"
      type="password"
      placeholder="请输入您的密码"
      show-password
    ></el-input>

    <div class="about-psw">
      <input type="checkbox" id="remember" v-model="rememberMe" />
      <label for="remember"></label>
      <div class="r-psw">记住密码</div>
      <div class="fg-psw" @click="$emit('switch-to-forget')">忘记密码?</div>
    </div>

    <form @submit.prevent="handleLogin">
      <input type="submit" value="登录" class="sb-lg" />
    </form>

    <div class="about-rg" @click="$emit('switch-to-register')">还没有账号？注册吧</div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const usernamelg = ref('');
    const passwordlg = ref('');
    const rememberMe = ref(false);

    // 当页面加载时，从 localStorage 获取之前保存的用户名和密码
    onMounted(() => {
      const savedUsername = localStorage.getItem('username');
      const savedPassword = localStorage.getItem('password');
      const savedRemember = localStorage.getItem('rememberMe');

      if (savedRemember === 'true') {
        usernamelg.value = savedUsername || '';
        passwordlg.value = savedPassword || '';
        rememberMe.value = true;
      } else {
        usernamelg.value = savedUsername || '';
        rememberMe.value = false;
      }
    });

    // 登录事件处理
    const handleLogin = () => {
      if (rememberMe.value) {
        localStorage.setItem('username', usernamelg.value);
        localStorage.setItem('password', passwordlg.value);
        localStorage.setItem('rememberMe', 'true');
      } else {
        localStorage.setItem('username', usernamelg.value);
        localStorage.setItem('rememberMe', 'false');
        localStorage.removeItem('password');
      }

      console.log('用户名:', usernamelg.value);
      console.log('密码:', passwordlg.value);
      window.location.href = '/';
    };

    return {
      usernamelg,
      passwordlg,
      rememberMe,
      handleLogin,
    };
  },
};
</script>

<style scoped>
/* 基本布局 */
.login {
  width: 390px;         
  height: 600px;       
  display: flex;
  flex-direction: column;
  padding: 25px;
  background-color: #fafafb;
  border-radius: 10px;
  margin: 0 auto;      /* 使表单居中 */
}


.login-wel {
  font-size: 24px;
  margin-bottom: 30px;
}

.login-text {
  font-size: 28px;
  margin-bottom: 5px;
}

.login-eng {
  font-size: 14px;
  margin-bottom: 30px;
}

.username-lg,
.password-lg {
  width: 350px;
  height: 50px;
  margin-top: 10px;
  font-size: 16px;
}

.psw-lg {
  font-size: 16px;
  margin-top: 30px;
}

.about-psw {
  display: flex;
  align-items: center;
  margin-top: 25px;
}

input[name='remember'] {
  width: 15px;
  height: 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
  outline: none;
}

.r-psw {
  font-size: 14px;
  margin-left: 10px;
}

.fg-psw {
  font-size: 14px;
  margin-left: auto;
  color: #888;
  cursor: pointer;
}

.fg-psw:hover {
  color: #000;
  font-weight: bold;
}

.sb-lg {
  margin-top: 50px;
  padding: 10px;
  width: 100%;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.sb-lg:hover {
  background-color: #45a049;
}

.about-rg {
  margin-top: 60px;
  text-align: center;
  color: #888;
}

.about-rg:hover {
  color: #000;
  font-weight: bold;
}

/* 响应式布局 */
@media (max-width: 768px) {
  .login {
    width: 90%;
    padding: 20px;
  }

  .login-wel {
    font-size: 22px;
  }

  .login-text {
    font-size: 24px;
  }

  .login-eng {
    font-size: 12px;
  }

  .sb-lg {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .login {
    width: 90%;
    padding: 15px;
  }

  .login-wel {
    font-size: 20px;
  }

  .login-text {
    font-size: 22px;
  }

  .login-eng {
    font-size: 12px;
  }

  .username-lg,
  .password-lg {
    width: 100%;
    font-size: 14px;
  }

  .sb-lg {
    height: 45px;
  }
}
</style>
